<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>投诉类型</title>
	    <link rel="stylesheet" href="../css/common.css">
	    <link rel="stylesheet" href="../css/page.css">
   		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	    <script src="../js/media.js"></script>
	    <script src="../js/common.js"></script>
	    <style>
	        body{
	            background: #f9f9f9;
	            width: 100%;
	    			overflow: inherit;
	        }
	        #body{
	            margin-top: -6px;
	            border-bottom: solid 1px #ddd;
	        }
	        #clipArea{
		        	position: fixed;
		        	left: 0;
		        	top: 0;
		        	width: 100%;
		        	height: 100%;
		        	display: none;
	        }
	        #clipBtn{
		        	position: absolute;
		        	right: 0;
		        	bottom: 20px;
		        	width: 150px;
		        	height: 40px;
		        	font-size: 14px;
		        	line-height: 40px;
		        	text-align: center;
		        	background: #5F3104;
		        	border-radius: 9px;
		        	color: #FFF;
		        	z-index: 100;
	        }
	        .upload_preview {
	            background-color: #fff;
	            overflow: hidden;
	            _zoom: 1;
	            float: left;
	        }
	        .upimg{
	            width: 60px;
	            height: 60px;
	        }
			.overflowhidden2{
			    word-break: break-all;
			    text-overflow: ellipsis;
			    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
			    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			    -webkit-line-clamp: 4; /** 显示的行数 **/
			    overflow: hidden;  /** 隐藏超出的内容 **/
			} 
			.tit_style{
				font-size: .12rem!important;
    				color: #5f3104!important;
			}
			.tousu_phone{
				box-sizing: border-box;
				margin-bottom: 0.08rem;
			}
			.tousu_phone .tousu_tit{
				padding:0 .1rem 0 .08rem;
			    font-size: .12rem;
			    color: #5f3104;
			    margin: .08rem 0;
			}
			.tousu_phone .inp_pho{
				box-sizing: border-box;
				width:100%;
				height:0.3rem;
				padding-left:0.1rem;
			}
	    </style>
	</head>
	<body>
	    <!--头部-->
	    <div class="public-header flex">
	        <!--<span class="public-header-left-search"></span>-->
	        <span class="public-header-left-back"></span>
	        <span class="public-header-center">投诉类型</span>
	        <span class="public-header-right"></span>
	    </div>
	
	    <!--正文-->
	    <div class="Complaints-type bc-gray">
	        <div class="section1">
	            <img class="proimg" src="" alt="">
	            <div class="word overflowhidden2">
	                
	            </div>
	        </div>
	        <div class="tousu_phone">
	        		<p class="tousu_tit">投诉者电话</p>
	        		<input class="inp_pho" type="number" placeholder="请输入投诉者电话"/>
	        </div>
	         <div class="section2">
	            <p class="t1">投诉描述</p>
	            <textarea name="" id="tousu_miao" cols="30" rows="10" placeholder='请输入投诉内容（不少于10个字）'></textarea>
	            <p class="t2">0/200</p>
	        </div>
	         <div class="section3" style="width:inherit">
	            <p><span class="tit_style">证据截图</span><em>（选填，最多3张）</em></p>
	           <!-- <input type="file" src="../img/上传信息@2x.png">-->
	           	<div id="preview" class="upload_preview"></div>
	            <div class="upload_choose" style="float: left;position: relative;">
	                <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
	                <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;"/>
	            </div>
	        </div>
	        <span class="button">
	            确认
	        </span>
	    </div>
		<div id="clipArea">
			<div id="clipBtn">确认裁剪并上传</div>
		</div>
	</body>
	<script src="../js/iscroll-zoom.js"></script>
	<script src="../js/hammer.js"></script>
	<script src="../js/lrz.all.bundle.js"></script>
	<script src="../js/jquery.photoClip.js"></script>
	<script type="text/javascript">
		var imgArr = new Array();//图片数组
		var productId = getQueryString('produceId');//产品id
		var storeId = getQueryString('storeid');//店铺id
		var storeFlag =getQueryString('comflag');//判断店铺类型1:商品,2:打赏,3店铺
		var tousuId = '';//需要投诉的id
		$('.public-header-center').text(decodeURI(decodeURI(getQueryString('reason'))));//投诉分类
		if(storeFlag==1){//商品
			$.ajax({
				url:base_url+"ZITAOHUI/auctionProduce",
	            data:{
	                produceId:productId,
	                user_id:sessionStorage.u_id
	            },
	  			type:"post",
	            dataType:"json",
	            success:function(data){
	            		$('.proimg').attr('src',data.extend.list[0].images[0].produceImages);
	            		$('.word').text(data.extend.list[0].produce_title)
	            }
			});	
			 tousuId = productId
		}else if(storeFlag==3){//店铺
			$.ajax({
				url:base_url+"ZITAOHUI/store",
	            data:{
	                storeId:storeId,
	                userId:sessionStorage.u_id
	            },
	  			type:"post",
	            dataType:"json",
	            success:function(data){
	            		$('.proimg').attr('src',data.extend.store[0].storeImage);//店铺图片
	            		$('.word').text(data.extend.store[0].storeName)//店铺名字
	            }
			});	
			tousuId = storeId;//店铺id
		}else if(storeFlag==2){//晒宝
			$.ajax({
				url:base_url+"ZITAOHUI/sharebioMsg",
	            data:{
	                sharBioid:productId,
	            },
	  			type:"post",
	            dataType:"json",
	            success:function(data){
	            		$('.proimg').attr('src',data.extend.list.userUpImage.split(',')[0]);//店铺图片
	            		$('.word').text(data.extend.list.discribe)//晒宝名字
	            }
			});	
			 tousuId = productId
		};
		$('.button').click(function(){
			var imgs = '';//图片字段
			if($('.img-div').length>=1){
				for(var z=0;z<$('.img-div').length;z++){
					imgs += "," +$('.img-div').eq(z).find('.upimg').attr('src')
				}
			};
			imgs = imgs.replace(/,/,'');
			if($('.inp_pho').val()==''){
				alert('请输入投诉者电话');
				return;	
			};
			sendAjax(imgs)
		});
		function sendAjax(imgs){//发送投诉信息
            $.ajax({
                url:base_url+"ZITAOHUI/addComplaint",
                data:{
                		complaintId:tousuId,
                		uid:sessionStorage.u_id,
                		reason:decodeURI(decodeURI(getQueryString('reason'))),
                		description:$('#tousu_miao').val(),
                		pathes:imgs,//投诉截图
                		type:storeFlag,//店铺类型
                		contact_phone:$('.inp_pho').val()//请输入投诉者的电话
                },
                dataType:"json",
                success:function (data){
                    console.log(data);
                    if(data.code == 1){
                        alert("提交成功");
                        if(storeFlag==1||storeFlag==3){
                        		window.location.href='buy-info-page.3.html?p_id='+productId;//产品id
                        }else if(storeFlag==2){
                       	 	window.location.href='Sunbird-details-page.html?sharBioid='+productId;//晒宝id
                        }
                    }
                }
            })
		};
		var $par = $('#preview');
	    var clipArea = new bjj.PhotoClip("#clipArea", {//图片上传裁剪插件！
			size: [400, 400],
			//outputSize: [400, 400],
			file: "#fileImage",
			view: "#view",
			ok: "#clipBtn",
			loadStart: function() {
				////console.log("照片读取中");
			},
			loadComplete: function() {
				////console.log("照片读取完成");
				$('#clipArea').show();
			},
			clipFinish: function(base64) {
				////console.log(base64);
				var newsIndex = base64.indexOf(",");
	            var news = base64.substr(parseInt(newsIndex + 1));
	            $('#clipArea').hide();
	            $.ajax({ //上传头像
	                type: "post",
	                url: base_url+"ZITAOHUI/upload/image",
	                data:{
	                    imageData:news
	                },
	                beforeSend:function(){
	                	$('#clipBtn').text('上传中……');
	                },
	                dataType: "json",
	                success: function (data) {
	                    if (data.code == 1) {
	                        //console.log("上传成功");
	                        $('#clipArea').hide();
	                        $('#clipBtn').text('确认裁剪并上传');
	                        var _url = data.extend.msg.fileUrl;
	                        $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + _url + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
		                    	if($('.img-div').length==3){//上传了三张以后，把添加图片的按钮删除
		                    		$('.upload_choose').hide();
		                    	};
	                    } else{
	                        alert("上传失败");
	                    }
	                },
	                error: function (error) {
	
	                }
	            })
			}
		});
    function delImg (obj){//点击图片右上角执行的函数
        $(obj).parent().remove();
        $('.upload_choose').show();
    }
	</script>
</html>